<template>
	<view class="active">
		<u-search :placeholder="text" :showAction="false" v-model="keyword" @search="xsousuo"></u-search>
		 <!-- 空白页 -->

		 <!-- tabs栏 -->
		 <u-tabs v-if="id" :list="list4" @click="onchion" :current='0'
		   :activeStyle="{ 
		        color: '#000',
		 		padding:'10rpx 20rpx',
		 		radius: '25px',
		 		background:'#FFD7CA',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		     }"
		     :inactiveStyle="{
		        color: '#717375',
		 		padding:'10rpx 20rpx',
		 		background:'#eeeeee',
		        transform: 'scale(1)'     
		     }">
		 		 </u-tabs>
		 <view class="empty" v-if="list.length==0">
		 	<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/cltynull.png" mode="aspectFit"></image>
		 	<view class="empty-tips">
		         暂无相关人员哦~~
		 	</view>
		 </view>
		<view v-for="(item,index) in list" :key="list" class="acvtube">
			 <view>
			 	<image class="acvubin" @click="xhitbus(index)" :src="item.avatarUrl" alt=""></image>
					<span class="caty-test">{{item.nick}}&nbsp;|&nbsp;{{fundeaster(item.type)}}</span>
					<van-button size="small" @click="xhitbus(index)">购买服务</van-button>
					<span class="caty-tianm" v-if="item.experienceLengthDesc != ''">{{item.experienceLengthDesc}}以上经验</span>  
			 </view>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[0]" mode=""></image>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[1]" mode=""></image>
				 <image class="caty-eimage" v-if="item.opusMainImages != null" :src="item.opusMainImages[2]" mode=""></image>
		</view>
	</view>
</template>

<script>
	import use from '@/http/user.js'
	import employeesConst from '@/employees/employees.js'
	const hireTypecon = {}
	employeesConst.hireTypecon.forEach((item) => {
	  hireTypecon[item.type] = item.value;
	});
	export default{
		data(){
			return{
				id:'',
				text:'',
				type:'',
				keyword:'',
				list:[],
				list4: [{
				     name: '木工',
					 value:'WOOD_WORKER'
				   }, {
				       name: '瓦工',
					   value:'TILE_WORKER'
				   }, {
				       name: '水电工',
					   value:'PLUMBER_WORKER'
				   }, {
				       name: '油漆工',
					   value:'PAINTER_WORKER',
				   }, {
				       name: '拆除杂工',
					   value:'DEMOLITION_WORKER'
				   }],
				q:{
					index:1,
					size:20,
					types: [],
					searchText:''
				},
			}
		},
		onLoad(option){
			this.id = option.isid
			this.type = option.type 
			if(option.type == "MANGER"){
				this.text = '同城搜索管家监理'
			} else if(option.type == 'DESIGN'){
				this.text = '同城搜索个人设计师'
			} else if(option.type == 'WOOD_WORKER'){
				  this.text = '同城装修工匠'
			} else if(option.type == 'INSTALL_CHANGE'){
				this.text = '同城安装与维修'
			} else {
				this.text = '同城家政保洁'
			}
			this.loacreated()
		},
		methods:{
			async loacreated(){
				this.q.types = []
				this.q.types.push(this.type)
				const res = await use.authenticati(this.q)
				this.list = res.data.data
			},
			// 搜索
			xsousuo(value){
				this.q.searchText = value
				this.loacreated()
			},
			onchion(index){
				this.type = index.value
				this.loacreated()
			},
			fundeaster(code){
				 return hireTypecon[code]
			},
			// 免费咨询
			 xhitbus(index){
						 uni.navigateTo({
						 	url: `/pages/components/authentication?id=`+this.list[index].userId, 
						 })
			},
		}
	}
</script>

<style lang="scss">
	.active{
		height: 100vh;
		background-color: #f1f1f1; 
		padding-top: 15rpx;
	}
	// 搜索框
	.u-search{
		width: 90%;
		margin-left: 5% !important;
		border-radius: 20px;
		border: 1px solid #ff7144;
		margin-bottom: 15rpx !important;
	}
	// 列表
	.acvubin{
		width: 75upx;
		height: 75upx;
		border-radius: 50%;
	}
	.acvtube{
		position: relative;
		margin-left: 20upx;   
		margin-right: 20upx;
		padding-left: 15rpx;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 30rpx;
	    background-color: #fff;
	}
	.caty-test{
		display: inline-block; 
		margin-left: 26rpx;
		font-size: 28rpx;  
		width: 50%; 
		transform: translateY(-100%);
		margin-bottom: 10upx;
	}
	.caty-tianm{
		display: inline-block;
	    color: #939393;
		font-size: 24rpx;
		/* float: left; */
		width: 35%;
		transform: translateX(-130%); 
	} 
	.caty-eimage{
		display: inline-block; 
		width: 30%; 
		height: 220rpx;
		border-radius: 20px;
		margin-right: 3%;
	}
	.van-button--default{
		background-color: #ff7144 !important;
		border: 1px solid #ff7144 !important; 
		color: #fff !important;
		margin-right: 15rpx !important;
		margin-top: 10rpx !important;
		border-radius: 20px !important;
		position: absolute !important;
		top: 20rpx !important;
		right: 15rpx !important; 
	}
	
	// 二级tabs栏
	.u-tabs__wrapper__nav__item__text{
		font-size: 24rpx !important;
		border-radius: 50rpx;
	}
	// 下划线
	.u-tabs__wrapper__nav__line{
		display: none !important;
	}  
	.u-search__content__input{
		background-color: #fff !important;
	}
	.u-search__content{
		background-color: #fff !important;
	}
	// 空白页 
		.empty{
				
			overflow: none;
		
			width: 100%;
			height: 100vh;
			padding-bottom:100upx;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 240upx;
				height: 160upx;
				margin-bottom:30upx;
			}
			.empty-tips{
				display:flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;
				.navigator{
					color: $uni-color-primary;
					margin-left: 16upx;
				}
				}
				}
</style>